package com.midele.goodstuff.ui.main.screen

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ScrollableTabRow
import androidx.compose.material3.Tab
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.em
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavHostController
import com.midele.goodstuff.R
import com.midele.goodstuff.viewmodel.MineViewModel
import kotlinx.coroutines.launch


@Composable
internal fun MineRoute(
    modifier: Modifier = Modifier,
    viewModel: MineViewModel = hiltViewModel(),
    navController: NavHostController,
) {
    MineScreen()
}

@Composable
fun MineScreen() {

    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (settingLayout, headerLogoLayout, headerNameLayout, unverifiedLayout, headerNumberLayout,
            headerSignLayout, toVerifiedLayout, mineDataCountLayout, vipImageLayout, menuLayout, myRecordLayout) = createRefs()

        Image(
            painter = painterResource(id = R.drawable.ic_main_bg), // 替换为你的图片资源ID
            contentDescription = "Background Image", // 图片描述，对于无障碍很重要
            contentScale = ContentScale.Crop, // 图片填充模式，根据你的需求选择合适的模式
            modifier = Modifier
                .fillMaxSize() // 使图片填充整个Box大小
        )
        Image(
            painter = painterResource(id = R.mipmap.ic_white_setting), // 替换为你的图片资源ID
            contentDescription = "Logo Image", // 图片描述，对于无障碍很重要
            contentScale = ContentScale.Fit, // 图片填充模式，根据你的需求选择合适的模式
            modifier = Modifier.constrainAs(settingLayout) {
                top.linkTo(parent.top, margin = 54.dp)
                end.linkTo(parent.end, margin = 18.dp)
            }
        )

        Image(
            painter = painterResource(id = R.drawable.ic_good_demo), // 替换为你的图片资源ID
            contentDescription = "Logo Image", // 图片描述，对于无障碍很重要
            contentScale = ContentScale.Crop, // 图片填充模式，根据你的需求选择合适的模式
            modifier = Modifier
                .size(60.dp)
                .clip(RoundedCornerShape(60.dp))
                .constrainAs(headerLogoLayout) {
                    top.linkTo(parent.top, margin = 96.dp)
                    start.linkTo(parent.start, margin = 24.dp)
                }
        )

        Text(
            text = "寻珍客",
            color = Color(0xFFFCE9C1),
            fontSize = 18.sp,
            modifier = Modifier
                .constrainAs(headerNameLayout) {
                    start.linkTo(headerLogoLayout.end, margin = 12.dp)
                    top.linkTo(headerLogoLayout.top)
                }
        )

        Text(
            text = "未实名",
            color = Color(0xFFFCE9C1),
            fontSize = 10.sp,
            style = TextStyle(lineHeight = 1.em),
            modifier = Modifier
                .clip(RoundedCornerShape(4.dp))
                .background(Color.Black)
                .border(width = 2.dp, color = Color(0xFFFCE9C1))
                .padding(start = 6.dp, end = 6.dp, top = 2.dp, bottom = 2.dp)
                .constrainAs(unverifiedLayout) {
                    start.linkTo(headerNameLayout.end, margin = 8.dp)
                    top.linkTo(headerNameLayout.top)
                    bottom.linkTo(headerNameLayout.bottom)
                }
        )

        Text(
            text = "觅得号：74104701",
            color = Color(0xFF969799),
            fontSize = 10.sp,
            style = TextStyle(lineHeight = 1.em),
            modifier = Modifier
                .padding(0.dp)
                .constrainAs(headerNumberLayout) {
                    start.linkTo(headerLogoLayout.end, margin = 12.dp)
                    top.linkTo(headerNameLayout.bottom)
                }
        )

        Text(
            text = "心之所向，觅得珍藏",
            color = Color.White,
            fontSize = 12.sp,
            modifier = Modifier
                .constrainAs(headerSignLayout) {
                    start.linkTo(headerLogoLayout.end, margin = 12.dp)
                    bottom.linkTo(headerLogoLayout.bottom)
                }
        )

        Text(
            text = "去实名",
            fontWeight = FontWeight.Bold,
            color = Color(0xFF121212),
            fontSize = 16.sp,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .clip(RoundedCornerShape(100.dp))
                .background(Color(0xFFFCE9C1))
                .padding(top = 6.dp, bottom = 6.dp, start = 16.dp, end = 16.dp)
                .constrainAs(toVerifiedLayout) {
                    end.linkTo(parent.end, margin = 24.dp)
                    top.linkTo(parent.top, margin = 109.dp)
                },

            )

        Row(
            horizontalArrangement = Arrangement.SpaceAround, modifier = Modifier
                .fillMaxWidth()
                .constrainAs(mineDataCountLayout) {
                    top.linkTo(toVerifiedLayout.bottom, margin = 29.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Text(
                    text = "8",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    color = Color.White
                )
                Text(text = "关注", fontSize = 12.sp, color = Color(0xFFC8C9CC))
            }
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Text(
                    text = "705",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    color = Color.White
                )
                Text(text = "粉丝", fontSize = 12.sp, color = Color(0xFFC8C9CC))
            }
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Text(
                    text = "1.05w",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    color = Color.White
                )
                Text(text = "获赞与收藏", fontSize = 12.sp, color = Color(0xFFC8C9CC))
            }
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Text(
                    text = "2",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    color = Color.White
                )
                Text(text = "关注", fontSize = 12.sp, color = Color(0xFFC8C9CC))
            }
        }

        Image(
            painter = painterResource(id = R.mipmap.ic_vip_ad), // 替换为你的图片资源ID
            contentDescription = "Logo Image", // 图片描述，对于无障碍很重要
            contentScale = ContentScale.Fit, // 图片填充模式，根据你的需求选择合适的模式
            modifier = Modifier.constrainAs(vipImageLayout) {
                top.linkTo(mineDataCountLayout.bottom, margin = 8.dp)
                start.linkTo(parent.start, margin = 16.dp)
                end.linkTo(parent.end, margin = 16.dp)
            }
        )


        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(start = 16.dp, end = 16.dp)
                .constrainAs(menuLayout) {
                    top.linkTo(vipImageLayout.bottom, margin = 12.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }) {
            Row(
                horizontalArrangement = Arrangement.SpaceAround, modifier = Modifier
                    .fillMaxWidth()
                    .clip(RoundedCornerShape(16.dp))
                    .background(Color(0xFF211C18))
                    .padding(top = 12.dp, bottom = 12.dp)
            ) {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        painter = painterResource(id = R.mipmap.ic_mine_good),
                        contentDescription = "Logo Image",
                        contentScale = ContentScale.Fit,
                        modifier = Modifier.size(24.dp)
                    )
                    Text(text = "商品管理", fontSize = 12.sp, color = Color.White)
                }
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        painter = painterResource(id = R.mipmap.ic_mine_order),
                        contentDescription = "Logo Image",
                        contentScale = ContentScale.Fit,
                        modifier = Modifier.size(24.dp)
                    )
                    Text(text = "全部订单", fontSize = 12.sp, color = Color.White)
                }
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        painter = painterResource(id = R.mipmap.ic_mine_record),
                        contentDescription = "Logo Image",
                        contentScale = ContentScale.Fit,
                        modifier = Modifier.size(24.dp)
                    )
                    Text(text = "登记记录", fontSize = 12.sp, color = Color.White)
                }
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Image(
                        painter = painterResource(id = R.mipmap.ic_mine_treasure),
                        contentDescription = "Logo Image",
                        contentScale = ContentScale.Fit,
                        modifier = Modifier.size(24.dp)
                    )
                    Text(text = "物品宝库", fontSize = 12.sp, color = Color.White)
                }
            }
        }

        TabWithPagerDemo(
            modifier = Modifier
                .background(color = Color.White)
                .constrainAs(myRecordLayout) {
                    top.linkTo(menuLayout.bottom, margin = 12.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    bottom.linkTo(parent.bottom)
                    height = Dimension.fillToConstraints
                })
    }
}


@Composable
fun TabWithPagerDemo(modifier: Modifier = Modifier) {
    val tabTitles = listOf(
        "首页",
        "发现",
        "消息",
        "我的",
        "首页",
        "发现",
        "消息",
        "我的",
        "首页",
        "发现",
        "消息",
        "我的"
    ) // Tab 标题列表
    val mPageCount = tabTitles.size
    val pagerState = rememberPagerState(initialPage = 0, pageCount = { mPageCount }) // 页面状态管理
    val scope = rememberCoroutineScope()

    Column(
        modifier
            .fillMaxSize()
            .padding(0.dp)
    ) {
        // Tab 标签栏
        ScrollableTabRow(
            edgePadding = 0.dp,
            selectedTabIndex = pagerState.currentPage,
            tabs = {
                tabTitles.forEachIndexed { index, title ->
                    Tab(
                        text = { Text(title, fontSize = 16.sp, color = Color.White) },
                        selected = pagerState.currentPage == index,
                        selectedContentColor = Color(0xFFFCE9C1),
                        unselectedContentColor = Color.White,
                        onClick = { scope.launch { pagerState.animateScrollToPage(index) } }
                    )
                }
            },
            // 分页指示器（可选）
            /*indicator = { positions ->
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .offset(x = 20.dp)
                        .height(4.dp)
                        .background(Color.Black)
                )
            }*/
        )

        // 横向滑动页面
        HorizontalPager(state = pagerState) { page ->
            when (page) {
                0 -> MineGoodScreen()
                1 -> MineGoodScreen()
                2 -> MineGoodScreen()
                3 -> MineGoodScreen()
                else -> EmptyScreen()
            }
        }
    }
}

